<!-- 天气实况 -->
<!-- 初步完结2024-10-8 -->
<template>
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">天气实况统计</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>天气实况</span>
            </span>
        </div>
        <div class="top">
            <div class="area">
                <el-select v-model="countyName" @change="changeArea" placeholder="区域" style="width: 150px;margin: 0 5px"
                    class="custom-select">
                    <el-option v-for="item in countyOptions" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <span class="collectTime">{{ `${countyName}实况,统计时间:${collectTime}` }}</span>
        </div>

        <div>
            <el-tabs v-model="type" @tab-click="handleTypeClick">
                <el-tab-pane label="实况表格" name="实况表格">
                    <div class="selection">

                        <el-select v-model="table_type" placeholder="类型" style="width: 150px;margin: 0 5px"
                            class="custom-select" @change="changeTableType">
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table">
                        <!-- 雨量 -->
                        <el-table stripe ref="filterTable" v-loading="loading" :header-cell-style="headerCellStyle"
                            :cell-style="cellStyle" :row-style="rowStyle" :data="rain_tableData.data"
                            style="width: 100%;height: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                            v-if="table_type === '雨量实况'" max-height="650px">
                            <el-table-column :prop="i.prop" :label="i.name" sortable v-for="i in rain_table_list"
                                :key="i.name">
                            </el-table-column>
                        </el-table>
                        <!-- 气温 -->
                        <el-table stripe ref="filterTable" v-loading="loading" :header-cell-style="headerCellStyle"
                            :cell-style="cellStyle" :row-style="rowStyle" :data="temp_tableData.data"
                            style="width: 100%;height: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                            v-if="table_type === '气温实况'" max-height="650px">
                            <el-table-column :prop="i.prop" :label="i.name" sortable v-for="i in temp_table_list"
                                :key="i.name">
                            </el-table-column>
                        </el-table>
                        <!-- 湿度 -->
                        <el-table stripe ref="filterTable" v-loading="loading" :header-cell-style="headerCellStyle"
                            :cell-style="cellStyle" :row-style="rowStyle" :data="Humidity_tableData.data"
                            style="width: 100%;height: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                            v-if="table_type === '相对湿度实况'" max-height="650px">
                            <el-table-column :prop="i.prop" :label="i.name" sortable v-for=" i in Humidity_table_list"
                                :key="i.name">
                            </el-table-column>
                        </el-table>
                        <!-- 风速 -->
                        <el-table stripe ref="filterTable" v-loading="loading" :header-cell-style="headerCellStyle"
                            :cell-style="cellStyle" :row-style="rowStyle" :data="wind_tableData.data"
                            style="width: 100%;height: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                            v-if="table_type === '风速实况'" max-height="650px">
                            <el-table-column :prop="i.prop" :label="i.name" sortable v-for="i in wind_table_list"
                                :key="i.name">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- <div class="pagination">
                        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage"
                            :page-size="pageSize" layout="prev, pager, next" :total="total" background
                            class="custom-pagination">
                        </el-pagination>
                    </div> -->
                </el-tab-pane>
                <el-tab-pane label="雨量分布图" name="雨量分布图">
                    <div class="img">
                        <img :src="rainPic" alt="">
                    </div>
                </el-tab-pane>
            </el-tabs>

        </div>


    </div>
</template>

<script>
import { reqRealSituation, reqRainLivePic } from '@/api/monitor/index.js'
import Cookies from 'js-cookie';

export default {
    name: "weather_live",
    data() {

        return {
            currentPage: 1,
            pageSize: 10,
            total: 10,
            // 菜单栏类型
            type: '实况表格',
            //加载标志
            loading: false,
            // 雨量分布图
            rainPic: '',
            //统计时间
            collectTime: '',
            // 表格类型
            table_type: '雨量实况',
            // 类型选择数据
            typeOptions: [
                {
                    value: '雨量实况'
                },
                {
                    value: '气温实况'
                },
                {
                    value: '相对湿度实况'
                },
                {
                    value: '风速实况'
                }
            ],
            // 县
            countyName: Cookies.get('county'),
            // 地区选项
            countyOptions: Cookies.get('county') === '雅安' ? [
                {
                    value: '雅安',
                },
                {
                    value: '雨城'
                },
                {
                    value: '经开'
                },
                {
                    value: '名山'
                },
                {
                    value: '天全'
                },
                {
                    value: '芦山'
                },
                {
                    value: '宝兴'
                },
                {
                    value: '荥经'
                },
                {
                    value: '汉源'
                }, {
                    value: '石棉'
                },] : [{ value: Cookies.get('county') }],
            // 区县数据
            list:
                Cookies.get('county') === '雅安' ? ['全市', '雨城', '天全', '芦山', '宝兴', '名山', '荥经', '汉源', '石棉'] : [Cookies.get('county')],
            // 雨量表头数据
            rain_table_list: [
                {
                    name: '序号',
                    prop: 'wsId'
                }, {
                    name: '所在县',
                    prop: 'county'
                }, {
                    name: '乡镇',
                    prop: "town"
                }, {
                    name: '站名',
                    prop: 'wsName'
                },
                {
                    name: '分钟雨量',
                    prop: 'rainMinute'
                }, {
                    name: '过去1h',
                    prop: 'rain1h'
                }, {
                    name: '过去2h',
                    prop: 'rain2h'
                }, {
                    name: '过去3h',
                    prop: 'rain3h'
                }, {
                    name: '过去6h',
                    prop: 'rain6h'
                }, {
                    name: '过去12h',
                    prop: 'rain12h'
                }, {
                    name: '过去24h',
                    prop: 'rain24h'
                }, {
                    name: '降雨量级',
                    prop: 'rainLevel'
                }, {
                    name: '过去48h',
                    prop: 'rain48h'
                },],
            // 雨量表格数据
            rain_tableData: {
                data: [
                    {
                        idx: '',//索引序列
                        county: '',//所在县
                        time: '',//采集时间
                        updateTime: '',//记录增加或修改时间
                        town: '',//乡镇
                        wsId: '',//区站号
                        wsName: '',//区站名称
                        rainMinute: '',//分钟雨量
                        rain1h: '',//过去一小时
                        rain2h: '',//过去...
                        rain3h: '',//过去...
                        rain6h: '',//过去...
                        rain12h: '',//过去...
                        rain24h: '',//过去...
                        rainLevel: '',//降雨量级
                        rain48h: ''////过去...
                    }],
                // pageCount: 0,
                // total: 0,
                time: ''
            },
            // 气温实况表头数据
            temp_table_list: [
                {
                    name: '序号',
                    prop: 'wsId'
                }, {
                    name: '站名',
                    prop: 'zm'
                },
                {
                    name: '当前气温',
                    prop: 'dqqw'
                }, {
                    name: '整点气温',
                    prop: 'zdqw'
                }, {
                    name: '当天最高',
                    prop: 'dtzg'
                }, {
                    name: '昨天最高',
                    prop: 'ztzg'
                }, {
                    name: '前天最高',
                    prop: 'qtzg'
                }, {
                    name: '当天最低',
                    prop: 'dtzd'
                }, {
                    name: '昨天最低',
                    prop: 'ztzd'
                }, {
                    name: '前天最低',
                    prop: 'qtzd'
                }, {
                    name: '当天平均',
                    prop: 'dtpj'
                }, {
                    name: '昨天平均',
                    prop: 'ztpj'
                }, {
                    name: '前天平均',
                    prop: 'qtpj'
                },],
            // 气温表格数据
            temp_tableData: {
                data: [
                    {
                        szx: '',//所在县
                        zm: '',//站名
                        dqqw: '',//当前气温
                        zdqw: '',//整点气温
                        dtzg: '',//当天最高气温
                        ztzg: '',//昨天最高气温
                        qtzg: '',//前天最高气温
                        dtzd: '',//当天最低气温
                        ztzd: '',//昨天最低气温
                        qtzd: '',//前天最低气温
                        dtpj: '',//当天平均气温
                        ztpj: '',//昨天平均气温
                        qtpj: '',//前天平均气温
                        time: '',//采集时间
                        updateTime: '',//记录增加或修改的时间
                        wsId: '',//区站号
                    },],
                // pageCount: 0,
                // total: 0,
                time: ''
            },
            // 湿度实况表头数据
            Humidity_table_list: [
                {
                    name: '序号',
                    prop: 'wsId'
                }, {
                    name: '站名',
                    prop: 'zm'
                },
                {
                    name: '当前湿度',
                    prop: 'dqsd'
                }, {
                    name: '整点湿度',
                    prop: 'zdsd'
                }, {
                    name: '当天最高',
                    prop: 'dtzg'
                }, {
                    name: '昨天最高',
                    prop: 'ztzg'
                }, {
                    name: '前天最高',
                    prop: 'qtzg'
                }, {
                    name: '当天最低',
                    prop: 'dtzd'
                }, {
                    name: '昨天最低',
                    prop: 'ztzd'
                }, {
                    name: '前天最低',
                    prop: 'qtzd'
                }, {
                    name: '当天平均',
                    prop: 'dtpj'
                }, {
                    name: '昨天平均',
                    prop: 'ztpj'
                }, {
                    name: '前天平均',
                    prop: 'qtpj'
                },],
            // 湿度表格数据
            Humidity_tableData: {
                data: [
                    {
                        szx: '',//所在县
                        zm: '',//站名
                        dqsd: '',//当前湿度
                        zdsd: '',//整点湿度
                        dtzg: '',//当天最高湿度
                        ztzg: '',//昨天最高湿度
                        qtzg: '',//前天最高湿度
                        dtzd: '',//当天最低湿度
                        ztzd: '',//昨天最低湿度
                        qtzd: '',//前天最低湿度
                        dtpj: '',//当天平均湿度
                        ztpj: '',//昨天平均湿度
                        qtpj: '',//前天平均湿度
                        time: '',//采集时间湿度
                        updateTime: '',//记录增加或修改的时间
                        wsId: '',//区站号
                    },],
                // pageCount: 0,
                // total: 0,
                time: ''
            },
            // 风速实况表头数据
            wind_table_list: [
                {
                    name: '序号',
                    prop: 'wsId'
                }, {
                    name: '站名',
                    prop: 'zm'
                },
                {
                    name: '当前风向',
                    prop: 'dqfx'
                }, {
                    name: '当前风速',
                    prop: 'dqfs'
                }, {
                    name: '整点风速',
                    prop: 'zdfs'
                }, {
                    name: '整点极大风速',
                    prop: 'zdjdfs'
                }, {
                    name: '当天极大风速',
                    prop: 'dtjdfs'
                }, {
                    name: '昨天极大风速',
                    prop: 'ztjdfs'
                }, {
                    name: '前天极大风速',
                    prop: 'qtjdfs'
                },],

            // 风速表格数据
            wind_tableData: {
                data: [
                    {
                        szx: '',//所在县
                        zm: '',//站名
                        dqfs: '',//当前风速
                        dqfx: '',//当前风向
                        zdfs: '',//整点风速
                        zdjdfs: '',//整点极大风速
                        dtjdfs: '',//当天极大风速
                        ztjdfs: '',//昨天极大风速
                        qtjdfs: '',//前天极大风速
                        time: '',//采集时间
                        updateTime: '',//记录增加或修改的时间
                        wsId: '',//区站号
                    },],
                // pageCount: 0,
                // total: 0,
                time: ''
            },
            //表格类型
            table_type_list: [
                {
                    name: '雨量实况',
                },
                {
                    name: '气温实况',
                },
                {
                    name: '相对湿度实况',
                },
                {
                    name: '风速实况',
                }

            ]
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },
        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },
        // 地区切换回调
        changeArea() {
            console.log(this.countyName)
            if (this.type === '实况表格') {
                this.getTableData()
            }
            else if (this.type === '雨量分布图') {
                this.getRainPic()
            }
        },
        // 表格类型切换回调
        changeTableType() {
            this.currentPage = 1
            this.getTableData()
            console.log(this.currentPage)
            if (this.table_type === '雨量实况') {
                // this.pageSize = this.rain_tableData.pageCount
                // this.total = this.rain_tableData.total
                this.collectTime = this.rain_tableData.time
            }
            else if (this.table_type === '气温实况') {
                // this.pageSize = this.temp_tableData.pageCount
                // this.total = this.temp_tableData.total
                this.collectTime = this.temp_tableData.time
            }
            else if (this.table_type === '相对湿度实况') {
                // this.pageSize = this.Humidity_tableData.pageCount
                // this.total = this.Humidity_tableData.total
                this.collectTime = this.Humidity_tableData.time
            }
            else if (this.table_type === '风速实况') {
                // this.pageSize = this.wind_tableData.pageCount
                // this.total = this.wind_tableData.total
                this.collectTime = this.wind_tableData.time
            }
        },

        // 翻页回调
        handleCurrentChange(current) {
            this.currentPage = current
            this.getTableData()
        },
        // tab切换回调
        handleTypeClick() {
            console.log(this.type)
            if (this.type === '雨量分布图') {
                this.getRainPic()
            }
            else if (this.type === '实况表格') {
                this.getTableData()
            }
        },
        // 获取雨量分布图
        async getRainPic() {
            this.loading = true
            const result = await reqRainLivePic(this.countyName, true)

            if (result.status === 200) {
                this.loading = false
                this.collectTime = result.data.data.updateTime
                this.rainPic = result.data.data.minioUrl

            }
            else {
                this.loading = false
                this.$message.error(result.data.msg)
            }

        },
        // 获取实况表格
        async getTableData() {
            this.loading = true
            let countyName = this.countyName
            if (countyName === '雅安') {
                countyName = ''
            }
            const result = await reqRealSituation(countyName, this.currentPage, 1000000, false)
            console.log(result)

            if (result.status === 200) {
                this.loading = false
                this.rain_tableData.data = result.data.rainData?.records
                // this.rain_tableData.pageCount = result.data.rainData.pageCount
                // this.rain_tableData.total = result.data.rainData.total
                this.rain_tableData.time = result.data.rainData?.records[0].updateTime || '缺'
                if (this.table_type === '雨量实况') {

                    this.collectTime = this.rain_tableData.time
                }

                this.wind_tableData.data = result.data.WindData?.records
                // this.wind_tableData.pageCount = result.data.WindData?.pageCount
                // this.wind_tableData.total = result.data.WindData?.total
                this.wind_tableData.time = result.data.WindData?.records[0].updateTime || '缺'

                this.Humidity_tableData.data = result.data.humidityData?.records
                // this.Humidity_tableData.pageCount = result.data.humidityData.pageCount
                // this.Humidity_tableData.total = result.data.humidityData.total
                this.Humidity_tableData.time = result.data.humidityData?.records[0].updateTime || '缺'

                this.temp_tableData.data = result.data.temperatureData?.records
                // this.temp_tableData.pageCount = result.data.temperatureData.pageCount
                // this.temp_tableData.total = result.data.temperatureData.total
                this.temp_tableData.time = result.data.temperatureData?.records[0].updateTime || '缺'


            }

            else {
                this.loading = false
                this.$message.error(result.msg)
            }

        },

    },
}
</script>

<style scoped lang="scss">
// 滚动条样式
::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.my-tabs>>>.el-tabs__item.is-active {
    background: rgba(0, 102, 255, 0.08);
    border-radius: 4px 4px 3px 3px;
}

.my-tabs>>>.el-tabs__active-bar {
    background-color: #166fe8;
    height: 3px;

}



:deep(.el-tabs__active-bar)::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 39%;
    bottom: 2px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 5px solid #166fe8;
}

:deep(.el-tabs__item) {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px !important;
    padding: 0 !important;
}

:deep(.el-tabs__item.is-active) {
    color: #409eff;
}

:deep(.el-tabs__nav.is-top) {
    display: flex;
}

:deep(.el-tabs__nav.is-top)>div {
    width: 100px;
    text-align: center;
}

.el-tabs__nav-scroll {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.el-table__row {
    width: 100% !important;
    height: 50px !important;
}

.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}

.container {
    width: 100%;
    height: 100%;


    .selection {
        width: 100%;
        margin-bottom: 20px;

    }

    .top {
        width: 100%;
        height: 50px;
        display: flex;
        flex-wrap: nowrap;

        .area {
            width: 10%;
            height: 100%;
            display: flex;
            align-items: center;

        }

        .collectTime {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90%;
            height: 100%;
            color: white;
            font-size: 20px;
            font-weight: bold;

        }
    }

    .table {
        width: 100%;

    }

    .img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 100%;
            height: 100%;
        }
    }

    // .pagination {
    //     width: 100%;
    //     margin: 20px 0;
    // }
}
</style>